<template>
	<view class="user" :class="theme">
		<view class="user-head">
			<u-avatar :size="60" :src="userInfo.avatar || '/static/userAvatar.jpg'" @tap="getUserUrl"></u-avatar>
			<view class="u-m-l-40 u-w-200 u-flex-1" v-if="isLogin">
				<!-- <view>{{ userInfo.nickname }}</view> -->
				<view>{{ userInfo.phone }}</view>
				<view class="u-m-t-20 u-font-24 u-content-color">
					{{tips || '注册时间：'+userInfo.createTime  }}
				</view>
			</view>
			<view @tap="login" class="u-m-l-40 u-w-200 u-flex-1" v-else>
				<view>登录</view>
				<view class="u-m-t-20 u-font-24 u-content-color">登录即可享受完整体验
				</view>
			</view>
			<view class="u-m-r-40" v-if="isLogin">
				<u-icon name="/static/user/black.png" v-show="theme == 'dark'" color="#000" size="20" @tap="changeTheme('light')"></u-icon>
				<u-icon name="/static/user/white.png" v-show="theme == 'light'" color="#000" size="20" @tap="changeTheme('dark')"></u-icon>
			</view>
		</view>
		<view class="user-information">
			<u-cell-group :border='false'>
				<u-cell icon="" title="我的套餐" :border='false' isLink  @click="onMeal"></u-cell>
			</u-cell-group>
			<u-grid :border="false" @click="clickMain">
				<u-grid-item v-for="(baseListItem,baseListIndex) in baseList" :key="baseListIndex">
					<image :src="'/static/'+baseListItem.name+'.png'" style="width: 60rpx;height: 60rpx;"></image>
					<text class="grid-text">{{baseListItem.title}}</text>
				</u-grid-item>
			</u-grid>
			<u-toast ref="uToast" />
		</view>

		<view class="user-application">
			<u-cell-group :border='false'>
				<u-cell icon="" title="我的应用" :border='false' isLink></u-cell>
			</u-cell-group>

			<u-grid :border="false">
				<u-grid-item v-for="(baseListItem,baseListIndex) in appList" :key="baseListIndex"
					@tap="go(baseListItem.url)">
					<u-icon class="grid-icon" :name="baseImg+baseListItem.icon" :size="22"></u-icon>
					<text class="grid-text">{{baseListItem.title}}</text>
				</u-grid-item>
			</u-grid>
			<u-toast ref="uToast" />
		</view>


		<!-- <view class="user-vip u-flex u-flex-between u-flex-y-center" v-if="isLogin">
			<view class="user-vip__position--left">
				<view>会员中心</view>
				<view class="u-m-t-20 u-font-24 " v-if="userInfo.expireTime">{{`到期时间: ${userInfo.expireTime}`
        }}</view>
				<view class="u-m-t-20 u-font-24 " v-else>会员不限次数</view>

			</view>
			<u-button customStyle="width: 200rpx;" type="primary" shape="circle"
				:text="userInfo.expireTime ? '续费会员' : '开通会员'" @tap="go('pages/cdk/index')"></u-button>
		</view>
		<view class="user-vip u-flex u-flex-between u-flex-y-center" v-else @tap="login">
			<view class="user-vip__position--left">
				<view>会员中心</view>
				<view class="u-m-t-20 u-font-24 u-content-color">登录查看会员权益</view>
			</view>
			<u-button customStyle="width: 200rpx;" type="primary" shape="circle" text="开通会员"></u-button>
		</view>
		<view class="u-p-20">
			<u-cell-group>
				<u-cell :title="item.title" isLink :icon="item.icon" v-for="item in list" :key="item.id"
					@tap="go(item.url)"></u-cell>
			</u-cell-group>
		</view> -->

		<!-- 广告位置 -->
		<!-- <view class="u-p-20">
			<mp-html :content="item.desc" v-for="item in ad('4')" :key="item.id"></mp-html>
		</view> -->

		<tabbar ref="tabBar" />
	</view>
</template>

<script>
	import {
		login
	} from "@/config/login.js";
	export default {
		data() {
			return {
				list: [],
				userInfo: {},
				isLogin: false,
				tips: '',
				baseList: [{
						name: 'balance',
						title: '收益'
					},
					{
						name: 'ren',
						title: '我的邀请'
					},
					{
						name: 'orderS',
						title: '订单'
					},
				],
				appList: [],
			};
		},
		onLoad() {
			this.getList();
		},
		onShow() {
			this.isLogin = uni.getStorageSync("appToken") ? true : false;
			this.userInfo = uni.getStorageSync("userInfo")
			console.log(this.userInfo)
			this.isLogin && this.getUserInfo()
		},
		methods: {
			//跳转我的套餐
			onMeal(){
				uni.navigateTo({
					url: "/pages/user/onMeal",
				});
			},
			//跳转
			clickMain(name) {
				switch (name) {
					case 0:
						uni.navigateTo({
							url: "/pages/user/balance",
						});
						break;
					case 1:
						uni.navigateTo({
							url: "/pages/user/distribution",
						});
						break;
					case 2:
						uni.navigateTo({
							url: "/pages/user/mealList",
						});
						break;
				}
			},
			//跳转应用
			clickApp(row) {
				console.log(row)
			},
			//切换主题
			changeTheme(e) {
				this.$store.commit('setTheme', e)
			},
			go(e) {
				this.$login()
				uni.$u.route(e);
			},
			async getUserInfo() {
				const {
					data
				} = await uni.$u.http.get(`/busi/members/getInfo?id=${this.userInfo.id}`);
				if (data.code == 200) {
					let userInfo = data.data
					this.userInfo = userInfo
					// 会员 > 赠送次数 > 总次数 > 今日次数 > 无 
					// if (userInfo.expireTime) {
					// 	this.tips = '会员不限次数'
					// } else if (userInfo.giveFrequency > 0) {
					// 	this.tips = `剩余提问次数：${userInfo.giveFrequency}次`
					// } else if (userInfo.totalFrequency > 0 && userInfo.frequency > 0) {
					// 	this.tips = `每日还可提问${userInfo.frequency}次，剩余免费总次数${userInfo.totalFrequency}`
					// } else if (userInfo.totalFrequency > 0 && userInfo.frequency === 0) {
					// 	this.tips = `今日次数已耗尽,请明日再来!剩余免费总次数${userInfo.totalFrequency}`
					// } else {
					// 	this.tips = '您已无免费次数，请开通会员使用～'
					// }

				}
			},
			login() {
				this.$login()
				//新加
				return uni.navigateTo({
					url: "/pages/login/index?type=useraccount",
				});
			},

			getUserUrl() {
				if (this.isLogin) {
					return uni.navigateTo({
						url: "/pages/user/inform",
					});
				}

			},

			async getList() {
				const {
					data
				} = await uni.$u.http.get("/busi/userMenu/list");
				// this.list = data.rows;
				this.appList = data.rows;
			},
		},
	};
</script>

<style lang="scss" scoped>
	.user {
		height: 100%;
		background-color: var(--bg);
		background-repeat: no-repeat;
		background-size: 100% 450rpx;

		&.light {
			background-image: url('../../static/user/bg.png');
			background-color: #f8f9f9;
		}

		&-head {
			/* 顶部背景图 start */
			padding: 20rpx;
			box-sizing: border-box;
			height: 350rpx;
			display: flex;
			align-items: center;
			color: var(--font-black);


		}

		&-vip {
			display: flex;
			margin: 20rpx;
			padding: 20rpx;
			height: 160rpx;
			border-radius: 20rpx;
			align-items: center;

			background: linear-gradient(-120deg, #3e445a, #31374a, #2b3042, #262b3c);

			&__position--left {
				display: flex;
				flex-direction: column;
				justify-content: center;
				margin-left: 20rpx;
				color: #fff;
				width: 500rpx;
			}
		}

		&-information {
			margin: 20rpx;
			padding: 10rpx;
			height: 230rpx;
			margin-top: -50rpx;
			border-radius: 20rpx;
			background-color: #d1ddff;


		}

		&-application {
			margin: 20rpx;
			padding: 10rpx;
			height: auto;
			border-radius: 20rpx;
			background-color: #ffffff;
		}

		/deep/.u-cell__title-text {
			color: var(--font-black)
		}



	}

	.grid-icon {
		padding: 10rpx;
	}

	.grid-text {
		font-size: 14px;
		color: #909399;
		padding: 5rpx 0 20rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}
</style>